<template>
  <div class="chart-container">
    <Pie :data="chartData" :options="chartOptions" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Pie } from 'vue-chartjs'
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'

ChartJS.register(ArcElement, Tooltip, Legend)

const props = defineProps<{
  data: { label: string; value: number; color?: string }[]
  title?: string
}>()

const chartData = computed(() => ({
  labels: props.data.map(d => d.label),
  datasets: [{
    data: props.data.map(d => d.value),
    backgroundColor: props.data.map((d, i) => 
      d.color || ['#00f3ff', '#ff00ff', '#00ff88', '#ffaa00', '#ff3366'][i % 5]
    ),
    borderColor: '#0a0e27',
    borderWidth: 2
  }]
}))

const chartOptions = computed(() => ({
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      position: 'bottom' as const,
      labels: {
        color: '#ffffff',
        padding: 15,
        font: { size: 12 }
      }
    },
    tooltip: {
      backgroundColor: 'rgba(26, 31, 58, 0.95)',
      titleColor: '#00f3ff',
      bodyColor: '#ffffff',
      borderColor: '#00f3ff',
      borderWidth: 1
    }
  }
}))
</script>

<style lang="scss" scoped>
.chart-container {
  height: 300px;
  position: relative;
}
</style>
